<template>
  <div 
    class="fixed inset-0 z-50 flex items-center justify-center p-4"
    v-if="visible"
    @click="handleClose"
  >
    <!-- 背景遮罩 -->
    <div class="absolute inset-0 bg-black bg-opacity-50 transition-opacity duration-300"></div>
    
    <!-- 对话框内容 -->
    <div 
      class="relative w-full max-w-2xl bg-white rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 scale-100"
      @click.stop
    >
      <!-- 对话框头部 -->
      <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
        <h3 class="text-lg font-semibold text-gray-800">
          {{ title || '数据详情' }}
        </h3>
        <button 
          class="text-gray-500 hover:text-gray-700 transition-colors"
          @click="handleClose"
        >
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <!-- 对话框内容区 -->
      <div class="p-6 max-h-[70vh] overflow-y-auto">
        <div v-if="loading" class="py-12 text-center">
          <i class="fa fa-spinner fa-spin text-2xl text-gray-400"></i>
          <p class="mt-2 text-gray-500">加载中...</p>
        </div>
        
        <div v-if="error" class="py-8 text-center">
          <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-100 mb-3">
            <i class="fa fa-exclamation-circle text-red-500"></i>
          </div>
          <p class="text-red-500">{{ error }}</p>
        </div>
        
        <div v-if="!loading && !error && data" class="space-y-6">
          <div v-for="(field, index) in fields" :key="index" class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
            <div class="text-sm font-medium text-gray-500 md:text-right pr-4">
              {{ field.label }}
              <span v-if="field.required" class="text-red-500">*</span>
            </div>
            <div class="md:col-span-2">
              <div class="p-3 bg-gray-50 rounded-md text-gray-800">
                <template v-if="field.type === 'checkbox'">
                  <i class="fa" :class="data[field.name] ? 'fa-check text-green-500' : 'fa-times text-gray-400'"></i>
                  <span class="ml-1">{{ data[field.name] ? '是' : '否' }}</span>
                </template>
                
                <template v-else-if="field.type === 'checkbox-group' && Array.isArray(data[field.name])">
                  <div class="flex flex-wrap gap-2">
                    <span 
                      v-for="(value, i) in data[field.name]" 
                      :key="i"
                      class="px-2 py-1 bg-blue-50 text-blue-700 rounded text-sm"
                    >
                      {{ getOptionLabel(field.options, value) }}
                    </span>
                  </div>
                </template>
                
                <template v-else-if="field.type === 'radio'">
                  {{ getOptionLabel(field.options, data[field.name]) }}
                </template>
                
                <template v-else-if="field.type === 'select'">
                  {{ getOptionLabel(field.options, data[field.name]) || '-' }}
                </template>
                
                <template v-else-if="field.type === 'file' && Array.isArray(data[field.name]) && data[field.name].length">
                  <div class="space-y-2">
                    <div v-for="(file, i) in data[field.name]" :key="i" class="flex items-center gap-2">
                      <div class="w-10 h-10 bg-gray-100 rounded flex items-center justify-center overflow-hidden">
                        <i v-if="!isImageFile(file)" class="fa fa-file-o text-gray-400"></i>
                        <img v-else :src="file.url || file" alt="文件预览" class="w-full h-full object-cover">
                      </div>
                      <a 
                        href="#" 
                        class="text-blue-600 hover:underline text-sm truncate"
                        :title="file.name || file.split('/').pop()"
                      >
                        {{ file.name || file.split('/').pop() }}
                      </a>
                      <span class="text-xs text-gray-500">
                        {{ formatFileSize(file.size) }}
                      </span>
                    </div>
                  </div>
                </template>
                
                <template v-else-if="field.type === 'date' || field.type === 'datetime-local'">
                  {{ data[field.name] ? formatDate(data[field.name]) : '-' }}
                </template>
                
                <template v-else-if="field.type === 'textarea'">
                  <pre class="whitespace-pre-wrap">{{ data[field.name] || '-' }}</pre>
                </template>
                
                <template v-else>
                  {{ data[field.name] || '-' }}
                </template>
              </div>
            </div>
          </div>
        </div>
        
        <div v-if="!loading && !error && !data" class="py-12 text-center">
          <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-4">
            <i class="fa fa-database text-2xl text-gray-400"></i>
          </div>
          <h3 class="text-lg font-medium mb-2">暂无数据</h3>
          <p class="text-gray-500">没有找到相关数据信息</p>
        </div>
      </div>
      
      <!-- 对话框底部 -->
      <div class="px-6 py-4 border-t border-gray-200 bg-gray-50 flex justify-end gap-3">
        <button 
          class="btn btn-primary"
          @click="handleClose"
        >
          关闭
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue'
import { formatDate } from '@/utils/date'

const props = defineProps({
  // 是否显示对话框
  visible: {
    type: Boolean,
    default: false
  },
  // 对话框标题
  title: {
    type: String,
    default: ''
  },
  // 字段配置
  fields: {
    type: Array,
    default: () => []
  },
  // 数据详情
  data: {
    type: Object,
    default: null
  },
  // 是否加载中
  loading: {
    type: Boolean,
    default: false
  },
  // 错误信息
  error: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['close'])

// 处理关闭对话框
const handleClose = () => {
  emit('close')
}

// 获取选项的标签
const getOptionLabel = (options, value) => {
  if (!options || !options.length || value === undefined || value === null || value === '') {
    return ''
  }
  
  const option = options.find(opt => opt.value === value)
  return option ? option.label : value
}

// 判断是否为图片文件
const isImageFile = (file) => {
  if (!file) return false
  if (file.type) {
    return file.type.startsWith('image/')
  } else if (file.name) {
    const ext = file.name.split('.').pop().toLowerCase()
    return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)
  }
  return false
}

// 格式化文件大小
const formatFileSize = (size) => {
  if (!size) return ''
  if (size < 1024) return `${size} B`
  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`
  return `${(size / (1024 * 1024)).toFixed(1)} MB`
}

</script>
